Shadeotech
Social Media Redesign
Summary
Keiko Corp is a developing tech company that wanted to create a new product to take on Amazon and build their own shopping experience. They wanted to create a mobile and web presence to take on their product. When using other shopping apps many times there are problems navigating the app, titles being too small to click, and overall not the best experience for the user.
I was tasked to design a web and mobile app to help Keiko Corp start up their shopping website
ROLE
Product Designer
TIMELINE
4 weeks
TOOLS Figma
SKILLS
UI/UX Design
Product Design
Usability Testing (A/B)
Project Management
Graphic Design
Design Ideation
To create a successful web application for the shopping app I needed to start off with the basics. Before jumping into the design of the app I needed to evaluate a few steps.
Step 1: Creating a sketch
To begin working on the design for an app a sketch needs to be made so there is something to go off of. I began sketching some basic ideas so that when I go into the design part I have a good understanding of what I am trying to implement and what aspects I need to include.
Step 2: User flows
Once I had a rough idea of how the app was going to look like. I went into Figma and began creating my user flows specifically for the onboarding and search items. This helped me get a better understanding of how the flow of the app would work. Apps have many items within other items so before I could start implementing the app I had to create a flow of how everything would work together
Step 3: Sitemaps
After going through the process of sketching out the designs and implementing a brief site map of some of the functions that the app would have. I went into creating a sitemap for how the app would flow. I created different components for each button and made a very simple sitemap to simplify and help visualize how the app would run through the commands of the user
Implementation
After the basic steps in the process of creating this web application were done, I went into implementing the user flows and sitemaps I created for the various functions this app would have. I dove deeper into how a user would go through the app and started creating wireframes and prototypes for the different pages the app would have
Wireframing
Wireframing helps visualize the components of the application and allows a designer to be able to implement the design very easily. I created many different wireframes to help visualize how the components of the app like the search, like, or cart feature would look
Typography, Color, and Visual Styles
After the wireframing was completed most of the implementation logic-wise was complete. The next step was to figure out what the brand colors would be, what type of topography styles would fit the theme, what imagery I would use for the products, and what type of icons and the placement of those icons would be
Typography
Color
Visual Styles
Execution
Once all the planning and implementation for every page was done I could start executing the app properly. There was a little bit of a trial and error portion to this since I was experimenting with different flows and figuring out how I wanted the final prototype to look like.
What I Learned
Intensive implementation: At first when I was given the task to create a mobile site for shopping I wanted to jump right in and start prototyping and creating designs without having a flow, but I soon came to realize that when creating something like an entire mobile app it takes a lot of time and thought. I had to take a few steps back and start with the basics like creating my sketches and using wireframes before I could start implementing my designs. Taking those necessary first steps is something I will keep in mind next time I am working on a project where I have to build/design an app.
Creating typography and color styles: I didn't realize the importance of having a set of colors and typography styles to use throughout an app. At first, I started playing around with different fonts and colors without thinking about how I would have to implement the same ones throughout the whole app. Once I understood that I was using the same fonts and headings multiple times I decided to make those into components and properties so that it would be easier to just apply them when I was typing something or coloring something new.
