This project was completed as a part of the coursework for a three month immersive UX design program. However, we were producing work for a real-world company, and consulting with the company's founder to do so.
In a team of three, we were tasked with redesigning Creative Freedom Co.'s website to serve the needs and goals of the founder and her users.
UX/UI Designer on a team of three
Principle UI/Visual Designer
User Research and Research Synthesis
Sketching, Wireframing, and Prototyping
We had our users complete the task of signing up for a membership with Creative Freedom Co. As expected, the tests revealed some glaring issues with the functionality of the site in its original state.
was the average time it took for our users to complete the task.
abandoned the task completely after becoming overwhelmed and frustrated.
of our users expressed deep frustrations about the site.
After conducting 6 user interviews and creating an Affinity Map from the insights collected, we deduced the two main takeaways that have to do with the site's design and functioning:
"Not having enough reviews and not having a preview makes me hesitant to sign up. How do I know it's worth my money?"
"If I can't engage with others who are learning, others who have failed AND succeeded, I think that makes a big difference in whether or not I want to put my money into something."
"Would need an obvious benefit to purchasing an ongoing membership."
"Need to be totally sure of what's included before I do anything."
"Need sufficient information about what's included."
Using the information gathered in our research phase, we created a primary and secondary persona to help flush out, and humanize the insights.
Then, we mapped out the user flows that illustrated the steps that each persona would take to accomplish the task that they set out to accomplish:
At this stage of the design process, we kept our client in mind, and her ambitions to pitch CFC's renewed website to potential investors. We figured it would be quite helpful for her to have a current-state journey map, to be able to cross reference against a future-state journey map, in order to illustrate the positive changes that occurred in the redesign.
The current-state journey map below details the journey that primary persona, Lisa, takes through Creative Freedom Co.'s website when attempting to become a member.
To begin our ideation phase, our team conducted a Design Studio, which allowed us to get our ideas out quickly, and get on the same page by critiquing each other's sketches in real time.
Before we started, we set some preliminary guidelines for ourselves based on the insights we had gathered during our research and discovery phase.
in effort to increase membership inquiries.
by alleviating the pain points and frustrations that users experience with the original site.
to deliver a fulfilling user journey that isn't weighed down by doubt and skepticism.
After discussing each other's sketches, we made decisions about which parts of our layouts should be included in our low fidelity wireframes, and proceeded to create them in Figma.
we conducted a set of usability tests to "check-in" with the state of the redesign, and how well it was serving our users needs.
We found that:
Users felt comfortable with the layout of each page and expressed no confusion or frustration.
Users were able to complete tasks with 100% success rate.
The assumptions that we had made about prioritizing actionable layout design were validated by the results of the test.
At this phase of the process, we began to develop the revitalized "look" of the site, including new typography and colors. We felt very strongly about the site needing to feel renewed and contemporary. Given the focus of my role, I was in charge of spearheading these efforts.
After experimenting with a variety of typographical options, our team settled on a pairing of serif and san serif typefaces. The serif typeface would be utilized on headers and sub-headers, whereas the san serif would be used in the body copy.
After being given some direction from the client at the outset of the project, we settled on this color palette.
She had mentioned that she wanted some combination of blue and purple, and we used that as the basis for the palette's creation. With the more varied color palette, we aimed to add a level of depth and energy to the site's design that wasn't present before.
Displayed below are the high fidelity frames that our primary persona, Lisa, would take when she signs up for a membership with CFC.
8 users tested our high fidelity prototype. We gave them the task of signing up to become a member of CFC.
Success rate.
Average duration of task.
Misclick rate.
of testers rated the task as being easy to accomplish.
