top of page
CASE STUDY
Deliverables: user interviews, persona, lo-fi sketches, hi-fi prototype, UI elements
Role: UX/UI Designer
.png)
Goals & objectives
Create a responsive web design for an existing app, Weverse Shop. The page present the current version (1.0) of the prototype. The official website by WEVERSE COMPANY INC. was released around the time of completion of this project (mid-May 2022) with limited features.
Challenges
Adobe XD overlay scroll bug
The scroll feature with overlay on is not working -- based on quick search through Adobe XD community pages, this has been a bug issue for several years now.
Process
I began the project by familiarizing myself with the Weverse Shop App and recruiting its users for user interviews and usability testing. I created personas based on the global user demographics and most commonly mentioned pain points. The next step was finalizing the site map. Upon completion, I worked on lo-fi wireframes, which were followed by hi-fi wireframes and prototype. Finally, the link to the prototype was shared with participants. The link is currently available to the general public.
Empathise
EMPATHISE & DEFINE
In order to adapt to a global user base of the app, user interviews were conducted remotely via online surveys. At the end of the survey, a question of interest in participation in a virtual one-to-one interview and usability testing was placed. Based on the common pain points of the Weverse Shop App, I created personas.
I treated the site map as the extension of the user journey. It was built based on categories and options available on existing Weverse Shop App and user pain points.
Ideate
I used Crazy 8s exercise for this part of the project. I asked for constructive feedback from other designers and we marked some of the elements that reflected pain points brought up by users.
Pain Point Solution #1: Easy access to information
Home page included a visual element with hyperlink to new announcements for quick access -- a solution to the pain point of users having a hard time finding informative posts about new product launches, new content, etc.
Pain Point Solution #2: Search function
Currently, the Weverse Shop App doesn't have a search button which participating users commented on and expressed their desire to have an option to "find exactly what [they are] looking for". I made sure to create space for the search bar in the navigation menu.
Pain Point Solution #3: Simplifying the categories
Weverse Shop App has an extensive selection of merchandise (apparel, books, photo books DVD, etc.). In order to maintain a clean appearance and straightforward experience for the users, I kept the categories in the navigation menu to top 3: Merch, Album, and Weverse (where users can find announcements, learn more about memberships and check their own status.
IDEATE & PROTOTYPE
Visual elements, such as page headers, were designed by using Canva Premium. Picture and descriptions of products were exported from the mobile app and rearranged to fit the format of the website.
Next Steps
Next Steps
While this is not an official prototype of the Weverse Shop website, I intend to continue building up on this project. The next steps are as follows:
-
Conducting usability testing prior
-
Adding and "restocking" items under Merch and Album categories
-
Creating a drop down menu for each category for easier access to sub-categories and sub-pages. I will be using the Site Map as guidelines for additional features.
What I Learned
Using overlay action type in Adobe XD to the project's advantage (such as pop up messages)
Taking the "one day at a time" approach (with Notion). An extensive website can be appear as an overwhelming project for any team. It's important to have a strategy personalized for each project individually. Using Notion and creating pages dedicated exclusively to this project has helped me track my work and highlight tasks that were not noted in the beginning stages.
TAKEAWAYS
I'm currently looking for new opportunities: gebski.olivia@gmail.com
bottom of page