Kickstart
Define
Refine
Design
Overview
In an increasingly digital and busy world, people are always looking for a convenient way to save time and energy. Kickstart helps consumers save time by providing them with an online marketplace that enables them to buy energy drinks wherever they are and receive their products right on their doorsteps.
My Role
Challenge
Users don’t have the time or ability to visit physical stores and would rather buy their goods on the go or from home. My job was to create an online store where users can easily shop from anywhere they can connect to the internet, whether on a mobile device or on a desktop.
Solution
I created an e-commerce website for an online store selling energy drinks. I made responsive designs so users can easily access the website from any device they are on. The website has basic navigation and clean design to aid in easy accessibility as well.
Brand Guidelines
My first task was creating brand guidelines. Brand guidelines are extremely important for developing a cohesive and recognizable brand. I really enjoyed the artistic freedom that came with doing this.
My challenge was to create an online store. I chose to create a responsive e-commerce website that sold energy drinks. Keeping energy drinks in mind, I decided to go with a fun, bright and bold feel for my brand. This extended to the logo, color palette, typography, and photography used.
By keeping the branding consistent through each of these factors, I was able to develop thorough brand guidelines that aided the rest of my design process. After establishing brand guidelines, I was able to start designing the website.
User Flow Diagram
Before I started wireframing my screens, it was important to establish what functions the website will perform. From the project brief, I chose 3 user flows to make screens for. Users will be able to save items to a wish list, access inventory without having to register, and access advanced filtering options.
Below is a user flow diagram connecting all of the user flows and showing all of the screens involved in completing the flows. After completing the user flow diagram, I was able to begin wireframing.
Wireframing
After deciding what functions the app will perform through developing user flows, I created low-, mid-, and high-fidelity wireframes. These wireframes serve as a foundation for the final screens. With these screens designed, I was able to perform usability tests to ensure they were user friendly before moving onto more detailed designs.
User Testing
With the wireframes complete, I was able to start user testing. User testing for this project was extremely useful and reinforced why it is necessary to complete the design process.
Participants were tasked with using advanced filtering options to browse the website. Every participant I tested did the exact same thing when given their task. I assumed everyone would go straight to the menu, but that was not the case. They each went directly to the search feature. Having received this response, I was able to adapt my user flow and screens to provide more attention to the search feature. Given it was a screen that was going to be heavily used, I decided to add trending searches to the search screen for convenience.
If I had not completed user testing, I would have never known this was an issue I needed to give attention to. The usability tests focused on the users’ experience and allowed me to design a more user friendly interface. Once implementing changes based on user feedback, I was able to begin stylizing the screens.
Visual Design
After completing user testing, I was able to move forward with the design process. I applied my brand guidelines to my high-fidelity wireframes to achieve my final screens. Once again, this is an e-commerce website for energy drinks. My aim was to create an energetic online store through the use of color, typography, and photography.
During the define stage of the process, I set the foundation for the app’s design. I defined what the brand guidelines were, this included color, typography, and imagery, and what functions the app will perform through user flow charts.
After defining the brand guidelines and functions, I created a blueprint for the structure of the app through wireframes. I developed low-, mid-, and high-fidelity wireframes and then performed usability tests. With the results from the tests, I refined my wireframes before moving onto the design phase.
After testing users and refining my screens, I applied the visual design. This included a color palette, typography hierarchy, and imagery style. Once the visual design was applied, I made mockups of the screens to show them in action.
-
Click the menu icon
-
Choose an option to shop
-
Land on a products page
-
Click the "Filter Results" button
-
Select filters of choice
-
Press "Apply Filters" button
-
Land on advanced filtered page
SCENARIO
Every participant clicked search icon before the menu icon. The majority of participants struggled to press menu icon because touch field was too small. A couple of participants were unsure where to start shopping or looking at products. A few participants had to be prompted to continue after first products page. All participants knew how to look at filter menu and apply filters.
TEST ANALYSIS
-
I changed the CTA button to say “Shop now” instead of “Sign Up,” so users immediately know where to click to look at products.
-
Users’ first instincts were to go to the search feature to find specific products, so I created a search page. I included trending searches to make searching products quicker.
-
Users hesitated to click on a filter, so I put separators to show they were distinct, clickable categories. I added a drop down feature as well.
-
I added which filters are applied above the products, so users can see what filters they have selected.
"You should change the main CTA to 'Start Shopping' instead of 'Sign Up.'"
"I don’t know where to go. Where do I find products?”
"The search button is the first thing I would click on."
"There should be a way to tell what filters you have applied on the products page."
Tools & Methodologies
Discovery
Challenge
Solution
Define
Brand Guidelines
User Personas
User Flow Diagram
Refine
Wireframing
User Testing
Design
Visual Design
Prototyping
Process
Discovery
The first stage of the design process was discovery. In this stage, I identified a challenge faced by consumers and presented a soltuion.
Check Out More of My Work!
Kickstart Brand Guidelines
SociologicalYOU
The Social Chef
Planit
GO Time
FEEDBACK
CHANGES
Reflection
The biggest challenge I faced throughout this project dealt with my user flows. Through usability tests, I learned my flows were missing some crucial screens.
This project taught me a lot about the value of UX research and design. It is important to create user-centric designs based on preliminary research of the audience and to test these frequently. For this project, I tested users early on. This helped me so much because I left out a crucial part of my flow that I would not have realized had I not tested. Additionally, participants provided me with very useful feedback that elevated my designs and made them much more intuitive for users. This project was a great eye opener for user testing, and I will take what I have learned from it and apply it to my future projects henceforth.
The next steps for this project would be to perform more usability tests. It would be useful to get users’ feedback on the visual design as well as on the changes made regarding the flows of the screens.
