Koreleo is a mom and pop shop that manufactures compression leotards for gymnasts. It was created by Faith Mason, mother of a collegiate gymnast who worried about the persistent back pain experienced by her daughter and other gymnasts alike. She noticed professional athletes using compression garments and lack of compression materials used in gymnastics leotards.
Myself and three teammates were tasked with a responsive redesign of the Koreleo website.
My role: UX Lead, other roles included: Team Lead, Research Lead, and UI Lead. We collaborated as a team in all facets of the project.
To determine the main goals of our redesign, my teammates and I first interviewed the company founder and product inventor, Faith Mason. She had a clear vision of what she wanted the brand Koreleo to represent, and that is a no-frills, get it done leotard that serves the specific purpose of back support during strenuous gymnastics training. She explained her pain points with the current Koreleo website and needs in the redesign:
Pain Points:
Too much text and competing elements on the home page
Poor information architecture
Lack of visuals representative of the brand
Needs:
Appeal to young female athletes and their parents
Convey the product specifications and benefits of targeted compression fabrics
Present the product in a professional manner
Faith also provided us with her own market research. Since she is an avid member of the audience she wishes to reach, we relied on her insights in creating user personas.
Research methods included preliminary 5 second tests to gauge the effectiveness of the current site followed by a moderated usability study. The study asked users to:
find their size based on given measurements
posed a real life scenario of wondering if they could iron their garment and where they could find that information
go through the shopping and purchase flow
Next, our team conducted a website audit of the current site, along with a competitive analysis to gain insights into what changes needed to be made to the site map.
Results from the user testing showed that the overall problem we needed to solve was to create an easily navigable site that is organized in a way that is not distracting to the purchase flow yet still informative. To solve this problem, the redesign focused on information architecture decisions that prioritized purchase motivations, an aesthetic that appealed to the taste of our audience, and provide enough content that built trust and brand connection.
UX Task 1 - Identifying Modular Elements & Content
To begin we identified the modular elements we wished to keep, and ones we wanted to add so that we solidified and narrowed down the content we were arranging for the site. These decisions were informed by our own research and data regarding target audience and brand story from our talks with Faith.
UX Task 2 - Grouping
Next we grouped elements & content from the previous task to consolidate information into hierarchies and relationships that make sense. Then we assigned these groups to pages and sections within each page.
UX Task 4 - Identify MVP of each Page
To help structure the flow of the pages and create guidance for the user we next identified the main purpose/focus of each page.
Finally we made calls to action through headings and buttons and highlighted features/information we thought was important to convey while hiding additional information that could easily be found through a button or link.
A key strategy in producing a responsive design template was modular design. Since the company is very young with few employees, it is important to be able to update content easily without having to redesign the pages each time. This also helped with consistency across platforms which is especially important for Koreleo because users include both kids and parents who generally use different devices when browsing the web.
In the images below, the left is the original home page for the site, and the right is a proposed design. Due to budgetary restrictions, stock images act as placeholders. Once a budget it reached, professional photographs will replace the placeholders. When the proposed design is further iterated on and tested, it will provide a basis for a final style guide for the rest of the pages.